<template>
  <div>
    <t-tabs v-model="tabValue">
      <t-tab-panel value="1" label="调度表信息">
        <t-form ref="form" class="step-form" labelWidth="120px" :colon="true">
          <t-row style="flex: 1">
            <t-col :span="12">
              <t-row style="row-gap:6px">
                <t-col :span="6">
                  <t-form-item label="年度" name="year">
                    {{ objData.year }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="月度" name="month">
                    {{ objData.month }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="调度表名称" name="name">
                    {{ objData.name }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="填报单位" name="deptName">
                    {{ objData.deptName }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="归口管理单位" name="manageDeptName">
                    {{ objData.manageDeptName }}
                  </t-form-item>
                </t-col>
                <t-col :span="6">
                  <t-form-item label="审批状态" name="approveStatus">
                    <t-tag @click="dialog.header = objData.name; dialog.objId = objData.id; dialog.open_approve_list = true" class="cursor-pointer" v-if="objData.approveStatus" :theme="handleTheme(objData.approveStatus, dict.type.approve_status )" variant="light">
                          {{ objData.approveStatus | filterByDict(dict.type.approve_status) }}
                    </t-tag>
                  </t-form-item>
                </t-col>
              </t-row>
            </t-col>
          </t-row>
        </t-form>
      </t-tab-panel>
    </t-tabs>
    <approve-list :header="dialog.header" :objId="dialog.objId" :visible.sync="dialog.open_approve_list"
      v-if="dialog.open_approve_list"></approve-list>
  </div>
</template>

<script>
import ApproveList from "../../approve/components/approve-list.vue";

export default {
  name: "dispatch-detail",
  dicts: ["approve_status"],
  components: {
    ApproveList
  },
  props: {
    objId: [String, Number],
  },
  data () {
    return {
      site_tag: import.meta.env.VITE_SITE_TAG,
      tabValue: '1',
      dialog: {
        header: "",
        objId: 0,
        open_approve_list: false,
      },
      objData: {},
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler (val) {
        if (val) {
          this.getObj(val);
        }
      }
    },
  },
  methods: {
    getObj () {
      this.$api.cgzh.dispatch.detail(this.objId).then(response => {
        this.objData = response.data;
      }).catch((e) => {
        this.$message.error(e.toString());
      });
    }
  }
}
</script>

<style lang="less" scoped>
.t-tab-panel {
  padding: 10px;
}

.t-form__item {
  margin-bottom: 6px
}
</style>
